<template>
    <div class="innovationAwardNotice">
        <header-cont :page="loginstatus=='unlogin'?'':'login'"></header-cont>
        <div class="section">
            <div class="left_content">
              <div class="newarea-right-title">
                <p>
                  <a href="https://www.cec.org.cn/" target="_blank">
                    <a-icon type="home" />
                    <span>首页</span>
                  </a>
                  <i>-</i>
                  <span>{{rightTitle}}</span>
                </p>
              </div>
                <p class="tzggzbt">{{detailnfo.tzggZbt}}</p>
                <span class="fbsj">发布时间：{{detailnfo.createTime}}</span>
                <div class="describe" v-html="detailnfo.tzggNrString"></div>
            </div>
            <div class="right_content">
                <div class="right_top">
                    <div class="main_left_cont main_left_cont_notice">
                        <div class="cont_header">
                            <div class="name">
                                <img src="@/assets/img/tzgg_title.png"/>
                                <!--<img src="@/assets/img/notice.png"/><span>通知公告</span>-->
                            </div>
                        </div>
                        <ul class="cont_list">
                            <li @click="changeInfo(item.id)" class="cont_li" v-for="(item, index) in dataList" :key="index">
                                <span class="notice_title">{{item.tzggXh}}{{item.tzggZbt}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="right_bottom">
                    <div class="cont_header">
                        <div class="name">
                            <img src="@/assets/img/zlzx_title.png"/>
                            <!--<img src="@/assets/img/notice.png"/><span>资料中心</span>-->
                        </div>
                    </div>
                    <ul class="cont_list">
                        <li @click="downloadZl(item.filePath, item.zlMc)" class="cont_li" v-for="(item, index) in zlList" :key="index">
                            <span class="notice_title">{{item.zlMc}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <footer-cont></footer-cont>
    </div>
</template>

<script>
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
import {
    cxjsbQueryById,
    cxjsbPageList,
    sysCxjZlList,
    sysCxjZlDownload
} from "@/api/shenbao";
export default {
    components: {
        headerCont,
        footerCont
    },
    data(){
        return {
            id: this.$route.query.id,
            dataList: [],
            zlList: [],
            detailnfo: {},
            loginstatus: '',
            total: 0,
            rightTitle: "通知公告",
        }
    },
    mounted(){
        this.onaxios();
        this.getCxjsbList();
        this.getZlList();
        var islogin = sessionStorage.getItem('islogin');
        if (islogin == '1') {
            this.loginstatus = 'login';
        } else {
            this.loginstatus = 'unlogin';
        }
    },
    methods:{
        // 公告详情信息
        onaxios(){
            let that = this;
            cxjsbQueryById(that.id).then(res=>{
                if (res.data.success) {
                    this.detailnfo = res.data.result;
                }
            })
        },
        // 获取通知公告列表
        getCxjsbList(){
            cxjsbPageList().then(res=>{
                if(res.data.success){
                    this.dataList = res.data.result.records;
                }
            })
        },
        // 获取资料中心列表
        getZlList(){
          let data = {
            pageNo: 1,
            pageSize: 10
          }
          sysCxjZlList(data).then(res=>{
            if(res.data.success){
              this.zlList = res.data.result.records;
              this.total = res.data.result.total;
            }
          })
        },
      downloadZl(url, zlMc){
        let that = this;
        let fileGs = url.split('.');
        sysCxjZlDownload(url).then(res=>{
          that.downfn(zlMc,res,fileGs[1]);
        })
      },
      downfn(title, res, fileGs) {
        const data = res.data;
        const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url;
        link.setAttribute('download', title+'.'+fileGs)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      },
        changeInfo(id){
            cxjsbQueryById(id).then(res=>{
                if (res.data.success) {
                    this.detailnfo = res.data.result;
                }
            })
        }
    }
}
</script>

<style lang="less">

.innovationAwardNotice {
    width: 100%;
    margin: 0 auto;
    background: #F7F7F7;
    .section {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        margin-top: 20px;
        .left_content {
            width: 800px;
            background: #fff;
            margin-right: 20px;
          .newarea-right-title {
            width: 700px;
            height: 40px;
            letter-spacing: 1px;
            border-bottom: 1px solid #ddd;
            margin: 12px 50px 0px 50px;
            display: flex;
            justify-content: space-between;
            b {
              font-weight: normal;
              font-size: 21px;
              font-weight: bold;
              color: #333;
            }
            p {
              height: 50px;
              display: flex;
              align-items: center;
              a {
                &:hover {
                  span {
                    color: #2d8cf0;
                    font-size: 14px;
                  }
                  i {
                    color: #2d8cf0;
                  }
                }
                span {
                  color: #999;
                  font-size: 14px;
                  margin-right: 5px;
                  font-weight: 400;
                  line-height: 32px;
                }
                i {
                  color: #999;
                }
              }
              &>i {
                font-style: normal;
                margin: 0 10px;
                color: #999;
              }
              &>span {
                color: #666;
                font-size: 14px;
                margin-right: 5px;
                font-weight: 400;
                line-height: 32px;
              }
            }
          }
            p {
                color: #333333;
                font-size: 24px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-weight: 500;
                color: #333333;
                line-height: 40px;
                text-align: center;
                margin-bottom: 0px;
            }
           .fbsj {
                font-size: 14px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-weight: 400;
                color: #999999;
                line-height: 26px;
                display: block;
                text-align: center;
                margin-top:10px;
            }
            .describe {
                text-align: center;
                margin-top: 20px;
                p {
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    justify-content: center !important;
                }
                img {
                    display: block!important;
                    /*margin: 20px auto 0!important;*/
                }
            }
            pre {
                margin-top: 16px;
                white-space: pre-wrap;
                padding: 0 32px 0 28px;
                font-size: 16px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-weight: 400;
                color: #666666;
                line-height: 26px;
            }
            h3 {
                margin-top: 30px;
                font-size: 22px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                font-weight: 500;
                color: #333333;
                line-height: 30px;
                padding-left: 28px;
            }
        }
        .right_content {
            width: 380px;
            .right_top {
                width: 100%;
                height: 425px;
                background: #FFFFFF;
                .cont_header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px solid #EEEEEE;
                    padding-left: 21px;
                    padding-right: 32px;
                    box-sizing: border-box;
                    height: 56px;
                    .name {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        border-bottom: 2px solid #6BD2FE;
                        span {
                            margin-left: 11px;
                            font-size: 16px;
                            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                            color: #333333;
                            line-height: 22px;
                        }
                    }
                }
                .cont_list {
                    padding-left: 21px;
                    padding-right: 13px;
                    box-sizing: border-box;
                    margin-top: 10px;
                    .cont_li {
                      cursor: pointer;
                      .notice_title {
                        font-size: 14px;
                        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                        font-weight: 300;
                        color: #4C5F82;
                        line-height: 35px;
                        list-style: none;
                      }
                    }
                }
            }
            .right_bottom {
                margin-top: 20px;
                width: 100%;
                height: 286px;
                background: #FFFFFF;
                .cont_header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1px solid #EEEEEE;
                    padding-left: 21px;
                    padding-right: 32px;
                    box-sizing: border-box;
                    height: 56px;
                    .name {
                        height: 100%;
                        display: flex;
                        align-items: center;
                        border-bottom: 2px solid #6BD2FE;
                        span {
                            margin-left: 11px;
                            font-size: 16px;
                            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                            color: #333333;
                            line-height: 22px;
                        }
                    }
                }
                .cont_list {
                    padding-left: 21px;
                    padding-right: 13px;
                    box-sizing: border-box;
                    margin-top: 10px;
                    .cont_li {
                        cursor: pointer;
                        .notice_title {
                            font-size: 14px;
                            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                            font-weight: 300;
                            color: #4C5F82;
                            line-height: 35px;
                            list-style: none;
                        }
                    }
                }
            }
        }
    }
}


</style>